<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>遮罩层</title>
    <style>
        *{margin:0;padding:0;}

        .shade{width:200px;height:200px;position:relative;overflow: hidden;border-radius: 50%;cursor: pointer;}
        .shade .shade_bg{display: none;width:100%;height:100%;border-radius: 50%;background-color: #0f0;opacity:0.5;filter:alpha(opacity=50);position:absolute;left:0;top:0;z-index: 10;}
        .shade .shade_content{width:198px;height:198px;border-radius: 50%;border:1px solid #f00;text-align: center;line-height:198px;}

        .shade:hover .shade_bg{display: block}
    </style>
</head>
<body>
<div class="shade">
    <div class="shade_bg"></div>
    <div class="shade_content">
        内容
    </div>
</div>
</body>
</html>